headless UIのCombobox (Autocomplete)
https://gyazo.com/0a867c2ca19e2fa3de561e93c681102e
ComboBoxを作る
keyboard操作が充実している ref
複数選択も出来る ref
fuzzy searchができるわけではない
そのロジックは自分で用意する
あくまでもUI部分を提供する
@headlessui/tailwindcssを使うことで、active時、open時のstyleを簡易に書ける
ui-open:*やui-active:*:を使う
docs
Uncontrolled Componentsとしても使える ref
選択肢に用意していない値の許可 ref
Combobox
root
value={}に選択肢を渡す
選択肢はobject[]でも良い ref
比較関数を用意したり、単にkeyを指定したりも出来る
Combobox.Label
optional
Combobox.Inputに対する<label>になる
省略した場合は、Combobox.Inputの内容がlabel扱いになっている
Combobox.Input
input field
displayValue
Comboboxにobject[]を渡した場合に使う ref
Combobox.Options
Combobox.Option
各選択肢
Combobox.Button